<template>
  <view class="subject-page">
    <view class="subject-box flex">
      <view class="flex-1 subject-wrapper" style="width: 0">
        <scroll-view
          scroll-x
          style="width: 100%"
          :scroll-into-view="scrollIntoViewId"
          scroll-with-animation
        >
          <view class="flex justify-between gap-20 subjects">
            <view
              :class="[
                'subject-item',
                'flex',
                'flex-column',
                'justify-center',
                'items-center',
                currentSubjectId == subject.id ? 'active' : '',
              ]"
              v-for="(subject, index) in subjectList"
              :key="subject.id"
              :id="'subject-' + subject.id"
              @click="switchSubject(subject, index)"
            >
              <view class="image-wrapper">
                <image
                  :src="subject.image_url"
                  style="width: 100%; height: 100%"
                ></image>
              </view>
              <view class="name">
                <text class="name">{{ subject.name }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="all" @click="subjectShow = true">
        <text>全</text>
        <text>部</text>
        <u-icon name="list-dot" size="24" color="#fff"></u-icon>
      </view>
    </view>
    <up-popup
      :show="subjectShow"
      mode="top"
      round="10"
      safeAreaInsetTop
      :safeAreaInsetBottom="false"
    >
      <view class="flex flex-column subject-popup">
        <view class="actions">
          <view class="all-btn">
            <text class="title">全部分类</text>
            <text v-if="isDragging" class="sub-title">
              长按拖动分类可调整顺序
            </text>
          </view>
          <view class="sort-btn" @click="handleSort">
            {{ isDragging ? "保存" : "分类排序" }}
          </view>
        </view>
        <u-gap height="10"></u-gap>
        <Movable
          :currentId="currentSubjectId"
          :column="5"
          itemKey="name"
          :value="temSubjectList"
          itemHeight="80px"
          @end="handleMovableEnd"
          @switch="switchSubject"
        ></Movable>
        <view class="btn" @click="handleClose"> 收起 </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { onMounted, ref, watch } from "vue";
import { useStore } from "vuex";
import Movable from "./Movable.vue";

const currentSubjectId = defineModel({ type: [Number, String] });

const props = defineProps({
  subjectList: {
    type: Array,
    default: () => [],
  },
});

const temSubjectList = ref(JSON.parse(JSON.stringify(props.subjectList)));

const subjectShow = ref(false);
const scrollIntoViewId = ref("");
const isDragging = ref(false);

const store = useStore();

watch(currentSubjectId, (val) => {
  const index = props.subjectList.findIndex((i) => i.id == val);
  const subject = props.subjectList.find((i) => i.id == val);
  if (subject) {
    switchSubject(subject, index);
  }
});

function switchSubject(subject, index) {
  const targetIndex = index < 1 ? 0 : index - 1;
  const prevItem = props.subjectList[targetIndex];
  const targetSubject = props.subjectList[targetIndex];
  scrollIntoViewId.value = `subject-${prevItem.id}`;
  currentSubjectId.value = subject.id;
  subjectShow.value = false;
}

function confirmSujectSort(list = []) {
  if (store.state.user.isStore) {
    store.commit("UPDATE_MERCHANT_SUBJECT_SEQUENCE", list);
  } else {
    store.commit("UPDATE_SUBJECT_SEQUENCE", list);
  }
}

function handleSort() {
  if (isDragging.value) {
    confirmSujectSort(temSubjectList.value);
    isDragging.value = false;
  } else {
    isDragging.value = true;
  }
}

function handleMovableEnd(list) {
  if (
    JSON.parse(JSON.stringify(temSubjectList.value)) !=
    JSON.parse(JSON.stringify(list))
  ) {
    isDragging.value = true;
    temSubjectList.value = list;
  }
}

function handleClose() {
  if (isDragging.value) {
    if (
      JSON.stringify(temSubjectList.value) !== JSON.stringify(props.subjectList)
    ) {
      uni.showModal({
        title: "提示",
        content: "是否保存排序",
        success: (res) => {
          if (res.confirm) {
            confirmSujectSort(temSubjectList.value);
            subjectShow.value = false;
            isDragging.value = false;
          } else {
            console.log(JSON.parse(JSON.stringify(props.subjectList)));
            temSubjectList.value = JSON.parse(
              JSON.stringify(props.subjectList)
            );
            subjectShow.value = false;
            isDragging.value = false;
          }
        },
      });
    } else {
      temSubjectList.value = JSON.parse(JSON.stringify(props.subjectList));
      subjectShow.value = false;
      isDragging.value = false;
    }
  } else {
    subjectShow.value = false;
    isDragging.value = false;
  }
}
</script>

<style lang="scss" scoped>
.subject-page {
  .subject-box {
    background-color: #281e1d;
    .subject-wrapper {
      position: relative;

      .subjects {
        .subject-item {
          padding: 10rpx;

          .image-wrapper {
            width: 100rpx;
            height: 100rpx;
            overflow: hidden;
            border-radius: 20rpx;
            background-color: $u-info-light;
            box-sizing: border-box;
            border: 2px solid transparent;
          }

          .name {
            margin-top: 10rpx;
            white-space: nowrap;
            font-size: 12px;
            padding: 2rpx 5rpx;
            max-width: 100rpx;
            color: #fff;
          }

          &.active {
            .image-wrapper {
              border: 3px solid $u-primary;
            }
            .name {
              color: #fff;
              background-color: $u-primary;
              border-radius: 20rpx;
            }
          }
        }
      }

      &::after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 40rpx;
        background: linear-gradient(
          to right,
          rgba(255, 255, 255, 0),
          rgba(255, 188, 188, 0.4)
        );
      }
    }

    .all {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      padding: 0 10rpx;
      color: #fff;
    }
  }
  .subject-popup {
    padding-top: 88rpx;

    .actions {
      padding: 0 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .all-btn {
        .title {
          font-size: 14px;
        }
        .sub-title {
          font-size: 12px;
          color: #999;
        }
      }

      .sort-btn {
        color: $u-primary;
      }
    }
    .btn {
      border-top: 1px solid #f0f0f0;
      text-align: center;
      padding: 20rpx 0;
      font-size: 18px;
    }
  }
}
</style>
